<template>
  <n-card :bordered="false" class="proCard" size="small">
    <BasicForm
      @register="register"
      @submit="handleSubmit"
      @reset="handleReset"
      :showActionButtonGroup="true"
    />
  </n-card>
</template>

<script lang="ts" setup>
import { BasicForm, FormSchema, useForm } from '@/components/Form';

const emit = defineEmits(['search', 'reset']);

const schemas: FormSchema[] = [
<#list table.fields as field>
  {
    field: '${field.propertyName}',
    label: '${field.comment}',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入${field.comment}',
    },
  },
</#list>
];

const [register, { getFieldsValue, setFieldsValue }] = useForm({
  labelWidth: 80,
  gridProps: {
    cols: '1 s:1 m:2 l:3 xl:4 2xl:4',
  },
  schemas,
  actionColOptions: {
    span: 24,
  },
});

function handleSubmit() {
  emit('search', getFieldsValue());
}

function handleReset() {
  emit('reset');
}
</script>

<style lang="less" scoped>
  .proCard {
    border-radius: 4px;
    margin-bottom: 12px;
    
    :deep(.n-card__content) {
      padding: 16px;
    }
  }
</style> 